<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<meta name = "viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

        <!--定义的第一个组件------------->
        <script type = "text/template" id = "header-one">
           <div>
               <p class = "alert alert-success">
                   <b style="color:red">自定义组件a显示的内容：</b>
                   <label> {{title}} </label>
                   <input v-model = "title" class = "form-control" />
               </p>
               <p class = "alert alert-success"> 
                   <b style="color:red">自定义组件b显示的内容：</b>
                   <label> {{pear}} </label>
                   <input v-model = "pear" class = "form-control" />
               </p>
               <button @click = "myClick"  class="btn btn-primary">Click me</button>
           </div>
        </script>
        
        <!--定义的第二个组件------------->
        <script type = "text/template" id = "header-two">
           <div>
               <p class = "alert alert-success">
                   <b style="color:red">自定义组件c显示的内容：</b>
                   <label> {{call}} </label>
                   <input v-model = "call" class = "form-control" />
               </p>
               <p class = "alert alert-success"> 
                   <b style="color:red">自定义组件d显示的内容：</b>
                   <label> {{apple}} </label>
                   <input v-model = "apple" class = "form-control" />
               </p>
               <button @click = "goClick"  class="btn btn-primary">Click me</button>
           </div>
        </script>
        
    </head>
    <body>
        <div class = "container">
            
            <div id = "app">
                <p class="alert alert-warning">
                    <b style="color:red">父组件显示的内容：</b>
                    <label> {{msg}} </label>
                    <input v-model = "msg" class = "form-control" />
                </p>
                <b>第一个组件：</b>
                <show-content v-bind:title="msg"></show-content>
                <hr>
                <b>第二个组件：</b>
                <show-view v-bind:call="msg"></show-view>
                <hr>
            </div>
            
        </div>
        
        <script>
            
            var value = 0;
            
            var vm = new Vue({
                el: '#app',
                data: {
                    msg: value
                },
                components: {
                    
                    // 定义了一个组件 #heade-one
                    'show-content': {
                        data: function(){
                            return {
                                pear: value
                            }
                        },
                        methods: {
                            myClick: function(){
                                vm.msg++;
                            }
                        },
                        props:['title'],
                        template: '#header-one'
                    },
                    
                    // 定义了另一个组件 #header-two
                    'show-view': {
                        data: function(){
                            return {
                                apple: value
                            }
                        },
                        methods: {
                            goClick: function(){
                                vm.msg++;
                            }
                        },
                        props:['call'],
                        template: '#header-two'
                    }
                }
            })
            
        </script>
        
     </body>
</html>